{include file="public/header"}
<style>
    
			/* 保修激活 */
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
		
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows{
				width: 100%;
				height: auto;
				padding: 8px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				color: #000000;
				font-weight: bold;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab .bt{
				font-size: 0.28rem;
				font-weight: normal;
				color: rgba(230, 0, 18,0.6);
				padding-left: 3px;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val{
				font-size: 0.28rem;
				color: #666666;
				padding: 4px 0;
				width: 100%;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs{
				width: 100%;
				height: 0.7rem;
				font-size: 0.28rem;
				padding: 0 0.1rem;
				outline: none;
				border: 1px solid #ccc;
				box-sizing: border-box;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs::-webkit-input-placeholder{
				font-size: 0.28rem;
			}
			.mainPage .contentBoxs .boxs1 .btnBox{
				width: 100%;
				height: auto;
				text-align: center;
			}
			.mainPage .contentBoxs .boxs1 .btnBox .btn{
				background-color: #394B8F;
				border: none;
				outline: none;
				height: 0.75rem;
				padding: 0 0.3rem;
				color: #fff;
				font-size: 0.3rem;
				letter-spacing: 3px;
			}
			
	
</style>
		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
						<div class="headGoBackBox">
							<div class="backBtn" @click="goBack">
								<div class="goBackI"><img src="/public/static/mobile/image/goBackIcon.png" style="width: 100%;"></div>
								<div class="goBackT">返回</div>
							</div>
							<div style="flex: 1;"></div>
						</div>
                        {include file="public/logobox"}
						<div class="boxs1">
							<div class="titleBoxs">保修激活</div>
							<div class="centerBoxs">
								<div class="rows">
									<div class="lab">序列号<span class="bt">*</span></div>
									<div class="val">
										<input class="inputs" v-model="sn" disabled="disabled" />
									</div>
								</div>
								<div class="rows">
									<div class="lab">姓名<span class="bt">*</span></div>
									<div class="val">
										<input class="inputs" placeholder="请输入姓名" v-model="name"/>
									</div>
								</div>
								<div class="rows">
									<div class="lab">手机号<span class="bt">*</span></div>
									<div class="val">
										<input class="inputs" type="number" placeholder="请输入手机号" v-model="phone"/>
									</div>
								</div>
								<div class="rows">     
									<div class="lab">公司名称<span class="bt">*</span></div>
									<div class="val">
										<input class="inputs" placeholder="请输入公司名称" v-model="companyName"/>
										<div style="font-size: 0.24rem;padding: 0.05rem 0;color: rgba(230, 0, 18,0.6);">没有公司的，请在此处填写姓名</div>
									</div>
								</div>
								<div class="rows">
									<div class="lab">公司电话<span class="bt" style="font-size: 0.24rem;">(非必填项)</span></div>
									<div class="val">
										<input class="inputs" placeholder="请输入公司电话" v-model="companyPhone"/>
									</div>
								</div>
								<div class="rows">
									<div class="lab">电子邮箱<span class="bt" style="font-size: 0.24rem;">(非必填项)</span></div>
									<div class="val">
										<input class="inputs" placeholder="请输入电子邮件" v-model="email"/>
									</div>
								</div>
							</div>
							<div class="btnBox">
								<button class="btn" v-on:click="throttle(3000)" >确认信息并激活设备保修</button>
							</div>
						</div>
                        {include file="public/footerbox"}
					</div>
				</div>
			</div>
			
			
            {include file="public/popup"}

		</div>

	
<script type = "text/javascript">
	var myreg=/^[1][0-9][0-9]{9}$/;
	var real_sn="{$real_sn}";
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
		  		showstate:false,  //提示窗
		  		toastMsg:"",   //提示窗的文字
		  		winHeight:document.documentElement.clientHeight+"px",
		  		name:"",

		  		phone:"",
		  		companyName:"",
		  		companyPhone:"",
		    	email:"",
				sn:"",
				real_sn:real_sn,

				lastTime:0 //默认上一次点击时间为0 
		  	}
	  	},
		// 创建页面
		created(){
			var _this=this;
			// 获取上一页面的参数
			// var sn = decodeURI(window.location.href.split("?")[1]);
			// console.log(sn)
			// _this.sn=sn.slice(3)

			var texts = decodeURI(window.location.href.split("?")[1]);
			var sn = decodeURI(texts.split("&")[0]);
			var phone = decodeURI(texts.split("&")[1]);
			_this.sn=sn.slice(3);
			_this.phone=phone.slice(6);

		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
        	
       },
	  	methods: {
			//   返回
			goBack(){
				console.log("AA")
				window.history.back(-1); 
			},
	  		//弹窗
	  		popup:function(msg){
	  			var _this=this;
	  			_this.toastMsg=msg;
	  			_this.showstate=true;
	  			setTimeout(()=>{
			        _this.showstate=false;
			    },1500);
	  		},
			  // 防止快速点击
			throttle(intervalTime){
				//获取当前时间的时间戳
				let now = new Date().valueOf();
				if(this.lastTime == 0 || (now-this.lastTime) > intervalTime){
					//重置上一次点击时间，intervalTime是我自己设置的间隔时间，根据自己的需要传参
					this.lastTime = now;
					console.log('间隔大于2秒，触发方法');
					this.sureBtn();
					//添加自己要调用的方法
				}else{
					console.log('不触发');
				}
			},
	  		//确认信息并提交
	  		sureBtn:function(){
	  			var _this=this;
				console.log()
	  			if(!_this.name){
	  				_this.popup("请填写姓名");
					return false;
	  			}else if(!_this.phone){
	  				_this.popup("请填写手机号");
					return false;
	  			}else if(!myreg.test(_this.phone)){
					_this.popup("请填写正确的手机号"); 
					return false;
				}else if(!_this.companyName){
	  				_this.popup("请填写公司名称");
					return false;
	  			}else{
					
	  				//alert( _this.real_sn);
                    axios.post('/mobile/Activation/active', {
						name: _this.name,        // 参数 姓名
						phone: _this.phone,        // 参数 手机号
						companyName: _this.companyName,        // 参数 公司名称
                        companyPhone: _this.companyPhone,        // 参数 公司电话
                        email: _this.email,        // 参数 电子邮箱
                        sn: _this.real_sn,        // 参数 sn
					})
					.then(function (res) {
						//console.log(res);
						var result=res.data;
						if(result.status==1){
                            // _this.popup("提交申请成功，请等待审核~");
							alert("提交申请成功，请等待审核~");
							window.close();
							window.location.href="/mobile/index/index.html?sn="+_this.sn+"&type=2";
        					window.close();
						}else{
							_this.popup(result.msg);
							return false;
						}
						
					})
					.catch(function (error) {
						console.log(error);
					});
					
	  			}
	  		},
	  		
	  	},
	})
</script>
{include file="public/footer"}